<!DOCTYPE html>
<!-- saved from url=(0037)https://etherdream.github.io/jsproxy/ -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>Page Sandbox</title>
  
  <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
  <!--<base target="_blank">--><base href="." target="_blank">
  <style>
    body {
      padding: 0 0.5em;
    }
    .box {
      margin-top: 1em;
    }
    #txtURL {
      width: 100%;
      height: 2em;
      text-indent: 0.5em;
      padding: 0.25em 0;
    }
    #btnGo {
      width: 100%;
      font-size: 1.5em;
    }
    #list a {
      margin: 1em;
    }
  </style>
<style type="text/css" abt="234"></style></head>
<body>
  <div class="box">
    <input id="txtURL" type="text" value="www.google.com" autofocus="">
  </div>
  <div class="box">
    <button id="btnGo">Go</button>
  </div>
  <div class="box">
    <span>切换线路:</span>
    <select id="selNode"><option id="--demo-hk" value="demo-hk">演示服务-香港节点</option><option id="--demo-sg" value="demo-sg">演示服务-新加坡节点</option><option id="--mysite" value="mysite">当前站点</option></select>
  </div>
  <div class="box" id="list"><a rel="noopener noreferrer" href="https://etherdream.github.io/jsproxy/-----https://www.google.com/"><img width="128" height="128" src="./index_files/google.png"></a><a rel="noopener noreferrer" href="https://etherdream.github.io/jsproxy/-----https://www.youtube.com/"><img width="128" height="128" src="./index_files/youtube.png"></a><a rel="noopener noreferrer" href="https://etherdream.github.io/jsproxy/-----https://twitter.com/google"><img width="128" height="128" src="./index_files/twitter.png"></a><a rel="noopener noreferrer" href="https://etherdream.github.io/jsproxy/-----https://www.flickr.com/"><img width="128" height="128" src="./index_files/flickr.png"></a><a rel="noopener noreferrer" href="https://etherdream.github.io/jsproxy/-----https://www.quora.com/topic/JavaScript-programming-language"><img width="128" height="128" src="./index_files/quora.png"></a><a rel="noopener noreferrer" href="https://etherdream.github.io/jsproxy/-----https://www.twitch.tv/"><img width="128" height="128" src="./index_files/twitch.png"></a><a rel="noopener noreferrer" href="https://etherdream.github.io/jsproxy/-----https://www.reddit.com/"><img width="128" height="128" src="./index_files/reddit.png"></a><a rel="noopener noreferrer" href="https://etherdream.github.io/jsproxy/-----https://zh.wikipedia.org/"><img width="128" height="128" src="./index_files/wiki.png"></a><a rel="noopener noreferrer" href="https://etherdream.github.io/jsproxy/-----https://gist.github.com/"><img width="128" height="128" src="./index_files/gist.png"></a><a rel="noopener noreferrer" href="https://etherdream.github.io/jsproxy/-----https://facebook.com/Google/"><img width="128" height="128" src="./index_files/facebook.png"></a><a rel="noopener noreferrer" href="https://etherdream.github.io/jsproxy/-----https://www.blogger.com/"><img width="128" height="128" src="./index_files/blogger.png"></a></div>
  <script>
    const PAGE_CONF_SET = 110
    const PAGE_CONF_GET = 111

    const SW_CONF_RETURN = 112
    const SW_CONF_CHANGE = 113

    const PAGE_READY_CHECK = 200
    const SW_READY = 201

    const sw = navigator.serviceWorker


    sw.addEventListener('message', onSwMsg)
    sendMsgToSw(PAGE_READY_CHECK)

    btnGo.onclick = function() {
      const text = txtURL.value.trim()
      if (text) {
        const url = './-----' + text
        open(url, '_blank', 'noopener,noreferrer')
      }
    }
    txtURL.onkeypress = function(e) {
      if (e.keyCode === 13) {
        btnGo.onclick()
      }
    }
    txtURL.setSelectionRange(0, txtURL.value.length)


    function onSwMsg(e) {
      const [cmd, msg] = e.data

      switch (cmd) {
      case SW_CONF_RETURN:
        conf = msg
        showConf()
        break

      case SW_CONF_CHANGE:
        conf = msg
        updateSelected()
        break

      case SW_READY:
        console.log('sw ready')
        showIcons()
        sendMsgToSw(PAGE_CONF_GET)
        break
      }
    }

    function onSwFail(err) {
      txtURL.value = err
    }

    selNode.onchange = function() {
      const item = this.options[this.selectedIndex]
      const node = item.value
      conf.node_default = node
      sendMsgToSw(PAGE_CONF_SET, conf)
    }

    function sendMsgToSw(cmd, val) {
      const ctl = sw.controller
      if (!ctl) {
        console.log('ctl is null')
        return
      }
      ctl.postMessage([cmd, val])
    }

    const SITE_LIST = [
      ['google', ''],
      ['youtube', ''],
      ['twitter', 'twitter.com/google'],
      ['flickr', ''],
      ['quora', 'www.quora.com/topic/JavaScript-programming-language'],
      ['twitch', 'www.twitch.tv/'],
      ['reddit', ''],
      ['wiki', 'zh.wikipedia.org/'],
      ['gist', 'gist.github.com/'],
      ['facebook', 'facebook.com/Google/'],
      ['blogger', ''],
    ]

    function showIcons() {
      list.innerHTML = SITE_LIST.map(v => {
        let [id, url] = v
        url = url || `www.${id}.com/`
        return `\
<a rel="noopener noreferrer" href=./-----https://${url}>\
<img width=128 height=128 src=__sys__/assets/ico/${id}.png></a>`
      }).join('')
    }

    function addNodeItem(id, text) {
      const optEl = document.createElement('option')
      optEl.id = '--' + id
      optEl.text = text
      optEl.value = id
      selNode.appendChild(optEl)
    }

    function updateSelected() {
      const id = conf.node_default
      const item = document.getElementById('--' + id)
      if (item) {
        item.selected = true
      } else {
        console.warn('unknown node:', id)
      }
    }

    function showConf() {
      for (const [id, node] of Object.entries(conf.node_map)) {
        if (!node.hidden) {
          addNodeItem(id, node.label)
        }
      }
      updateSelected()
    }
  </script>

<div style="position: static; width: 0px; height: 0px; border: none; padding: 0px; margin: 0px;"><div id="trans-tooltip"><div id="tip-left-top" style="background: url(&quot;chrome-extension://ccfjcepmiaackkccabgeeegeklgifffd/imgs/map/tip-left-top.png&quot;);"></div><div id="tip-top" style="background: url(&quot;chrome-extension://ccfjcepmiaackkccabgeeegeklgifffd/imgs/map/tip-top.png&quot;) repeat-x;"></div><div id="tip-right-top" style="background: url(&quot;chrome-extension://ccfjcepmiaackkccabgeeegeklgifffd/imgs/map/tip-right-top.png&quot;);"></div><div id="tip-right" style="background: url(&quot;chrome-extension://ccfjcepmiaackkccabgeeegeklgifffd/imgs/map/tip-right.png&quot;) repeat-y;"></div><div id="tip-right-bottom" style="background: url(&quot;chrome-extension://ccfjcepmiaackkccabgeeegeklgifffd/imgs/map/tip-right-bottom.png&quot;);"></div><div id="tip-bottom" style="background: url(&quot;chrome-extension://ccfjcepmiaackkccabgeeegeklgifffd/imgs/map/tip-bottom.png&quot;) repeat-x;"></div><div id="tip-left-bottom" style="background: url(&quot;chrome-extension://ccfjcepmiaackkccabgeeegeklgifffd/imgs/map/tip-left-bottom.png&quot;);"></div><div id="tip-left" style="background: url(&quot;chrome-extension://ccfjcepmiaackkccabgeeegeklgifffd/imgs/map/tip-left.png&quot;);"></div><div id="trans-content"></div></div><div id="tip-arrow-bottom" style="background: url(&quot;chrome-extension://ccfjcepmiaackkccabgeeegeklgifffd/imgs/map/tip-arrow-bottom.png&quot;);"></div><div id="tip-arrow-top" style="background: url(&quot;chrome-extension://ccfjcepmiaackkccabgeeegeklgifffd/imgs/map/tip-arrow-top.png&quot;);"></div></div></body></html>